<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="标题">
        <el-input class="w500" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="商品分类">
        <el-input class="w500" v-model="form.cate_name"></el-input>
      </el-form-item>
      <el-form-item label="艺术品作者">
        <el-input class="w500" v-model="form.authors"></el-input>
      </el-form-item>
      <el-form-item label="产品编号">
        <el-input class="w500" v-model="form.product_code"></el-input>
      </el-form-item>
      <el-form-item label="封面图">
        <img v-bind:src="form.profile_pic" alt="" width="150" height="150">
      </el-form-item>
      <el-form-item label="商品图片">
        <img v-for="(urls, index) in imgs_url" v-bind:src="urls" alt="" width="150" height="150">
      </el-form-item>
      <el-form-item label="数量">
        <el-input class="w500" v-model="form.number"></el-input>
      </el-form-item>
      <el-form-item label="原始数量">
        <el-input class="w500" v-model="form.origin_number"></el-input>
      </el-form-item>
      <el-form-item label="单价(元)">
        <el-input class="w500" v-model="form.price" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="默认排序">
        <el-input class="w500" v-model="form.order"></el-input>
      </el-form-item>
      <el-form-item label="付款方式">
        <el-radio-group v-model="form.pay_method">
          <el-radio label="0">余额</el-radio>
          <el-radio label="1">现金</el-radio>
          <el-radio label="2">亚数币</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="交割方式">
        <el-radio-group v-model="form.delivery_type">
          <el-radio label="1">买家自提</el-radio>
          <el-radio label="2">送货上门</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品状态">
        <el-radio-group v-model="form.status">
          <el-radio label="0">待审核</el-radio>
          <el-radio label="1">审核通过</el-radio>
          <el-radio label="2">审核失败</el-radio>
          <el-radio label="3">下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data: function () {
      return {
        imgs_url: []
      }
    },
    computed: {
      ...mapState({
        form: state => state.goods.goodsInfo
      })
    },
    async created () {
      await this.goodsInfo()
      this.form.pay_method = String(this.form.pay_method)
      this.form.delivery_type = String(this.form.delivery_type)
      this.form.status = String(this.form.status)
      this.form.price = Number(this.form.price) / 100
      this.imgs_url = this.form.imgs_urls.split(',')
    },
    methods: {
      // 获取商品信息
      async goodsInfo () {
        let payload = {
          id: this.$route.params.id
        }
        await this.$store.dispatch('goods/goodsInfo', payload)
      },
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>
